<template>
	<cl-dialog
		title="绑定模板"
		width="500px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-form-item prop="mobile_firest_template_id">
				<template #label>
					<!-- 移动端一跳模板 -->
					一跳模板
					<span class="tips">(必选)</span>
				</template>
				<!-- <select-test style="width: 100%" ref="templateSelectH5" v-model="form.mobile_firest_template_id" /> -->
				<cl-select
					v-model="form.mobile_firest_template_id"
					placeholder="请选择一跳模板"
					style="width: 100%"
					filterable
				>
					<el-option
						v-for="item in templateList"
						:label="item.name"
						:value="item.id"
						:key="item.id"
					/>
				</cl-select>
			</el-form-item>
			<!-- 战术性隐藏 -->
			<!-- <el-form-item prop="mobile_second_template_id">
				<template #label>
					移动端一跳前置模板
					<span class="tips">
						(可选，选择后，移动端会优先使用这个模板，再跳转到“移动端一跳模板”)
					</span>
				</template>
				<cl-select
					v-model="form.mobile_second_template_id"
					placeholder="请选择移动端一跳前置模板"
					style="width: 100%"
					filterable
					clearable
				>
					<el-option
						v-for="item in templateList"
						:label="item.name"
						:value="item.id"
						:key="item.id"
					/>
				</cl-select>
			</el-form-item> -->
			<el-form-item prop="second_template_id">
				<template #label>
					二跳模板
				</template>
				<cl-select
					v-model="form.second_template_id"
					placeholder="请选择二跳模板"
					style="width: 100%"
					filterable
					clearable
				>
					<el-option
						v-for="item in templateList"
						:label="item.name"
						:value="item.id"
						:key="item.id"
					/>
				</cl-select>
				<!-- <select-test style="width: 100%" ref="templateSelectPc" v-model="form.second_template_id" /> -->
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" @click="submit" :loading="saving">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import SelectTest from "./select.vue"
import TeacherSelect from "@/components/teacher-select";
export default {
	components: {
		SelectTest,
		TeacherSelect
	},
	props: {
		adInfo: {
			type: Object,
			default: () => ({})
		},
		type: {
			type: String,
			default: "land"
		}
	},
	data() {
		return {
			visible: false,
			saving: false,
			form: {
				channel_id: "",
				mobile_firest_template_id: "",
				mobile_second_template_id: "",
				pc_firest_template_id: "",
				second_template_id: "",
			},
			rules: {
				mobile_firest_template_id: [{ required: true, message: "移动端一跳模板" }]
			},
			templateList: []
		};
	},
	methods: {
		open(data = {}) {
			console.log(data,'data')
			this.visible = true;
			this.getDetail(data.id);
			this.getTemplateList(data.adInfo);
			
		},
		beforeClose(done) {
			!this.saving && done();
		},
		close() {
			this.visible = false;
			this.reset();
		},
		reset() {
			this.saving = false;
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const { biz_id, id } = this.adInfo;
				const { mobile_firest_template_id, pc_firest_template_id, second_template_id } = this.form;
				let form = {
					...this.form,
					mobile_firest_template_id: mobile_firest_template_id,
					mobile_second_template_id: mobile_firest_template_id,
					pc_firest_template_id: pc_firest_template_id || mobile_firest_template_id,
					second_template_id: second_template_id,
					biz_id,
					ad_id: id,
					type: this.type == "land" ? 1 : 2
				};
				await this.$service.ad.templateBindAdd(form).finally(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		},
		async getDetail(channel_id) {
			const { biz_id, id } = this.adInfo;
			const data = await this.$service.ad.templateBindView({
				biz_id,
				ad_id: id,
				channel_id,
				type: this.type == "land" ? 1 : 2
			});
			this.form = {
				channel_id,
				mobile_firest_template_id: data.mobile_firest_template_id,
				mobile_second_template_id: data.mobile_second_template_id,
				pc_firest_template_id: data.pc_firest_template_id,
				second_template_id: data.second_template_id
			};
			this.getNewTemplateList();
		},
		async getTemplateList(adInfo) {
			const { biz_id } = this.adInfo;
			this.templateList = [];
			if (!biz_id) return;
			const list  = await this.$service.ad.templateSelfLists({ ad_id: adInfo.id});
			this.templateList = list;
		},
		getNewTemplateList(){
            const { biz_id } = this.adInfo;
			const {mobile_firest_template_id,pc_firest_template_id} = this.form;
		    this.$nextTick(() => {
				this.$refs.templateSelectH5.init({
					biz_id: biz_id, //事业部id
					temple_id:mobile_firest_template_id, //初始id
				});
				this.$refs.templateSelectPc.init({
					biz_id: biz_id, //事业部id
					temple_id:pc_firest_template_id, //初始id
				});
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.tips {
	color: #aaa;
	font-size: 12px;
}
</style>
